import React, { useEffect, useState } from 'react'
import { StyleSheet, TouchableOpacity, Text, View, Image, ImageBackground, ScrollView, Dimensions } from 'react-native';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { Divider } from '@rneui/themed';
import { Card, Button, Icon, ButtonGroup } from '@rneui/themed';
import { getOrder, getAll } from '../../api/order';
import axios from '../../api/axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useFocusEffect } from '@react-navigation/native';
import { baseURL } from '../../context/AuthProvider';

const add = (m) => { return m < 10 ? '0' + m : m }
//将时间戳转为普通格式
const fortime = (shijianchuo) => {
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s);
}
//route获取传来的userid
const PayList = ({ navigation, route }) => {
    const [selectedIndex, setSelectedIndex] = useState(0);
    //存放获取的订单数组
    const [itemList, setItemList] = useState([]);
    console.log(route.params.state);
    console.log(fortime(1684045537520));
    const userid = route.params.userid
    console.log(route);
    console.log(userid);
    useFocusEffect(React.useCallback(() => {
        if (selectedIndex == 0) {
            //获取全部订单
            axios.post('/order/alllist',{ userid: userid })
                .then(res => {
                    setItemList(res.data);
                })
        } else if (selectedIndex == 1) {
            //获取待发货订单
            axios.post('/order/single',{ state: 0, userid: userid })
                .then(res => {
                    setItemList(res.data);
                })
        } else if (selectedIndex == 2) {
            //获取待收货订单
            axios.post('/order/single',{ state: 1, userid: userid })
                .then(res => {
                    setItemList(res.data);
                })

        } else if (selectedIndex == 3) {
            //获取待评价订单
            axios.post('/order/single',{ state: 2, userid: userid })
                .then(res => {
                    setItemList(res.data);
                })
        }
    }, [selectedIndex]))
    // useEffect(() => {
    //     if (selectedIndex == 0) {
    //         // AsyncStorage.getItem('alllist').then(
    //         //     data => {
    //         //         if (data) {
    //         //             console.log(data);
    //         //             setItemList(JSON.parse(data))
    //         //         }
    //         //     }
    //         // )
    //         //获取全部订单
    //         axios.post('/order/alllist',{ userid: userid })
    //             .then(res => {
    //                 setItemList(res.data);
    //                 // setOrderIs(res.msg);
    //                 // AsyncStorage.setItem('alllist', JSON.stringify(res.data))
    //             })
    //     } else if (selectedIndex == 1) {
    //         // AsyncStorage.getItem('0list').then(
    //         //     data => {
    //         //         if (data) {
    //         //             console.log(data);
    //         //             setItemList(JSON.parse(data))
    //         //         }
    //         //     }
    //         // )
    //         //获取待发货订单
    //         axios.post('/order/single',{ state: 0, userid: userid })
    //             .then(res => {
    //                 setItemList(res.data);
    //                 // AsyncStorage.setItem('0list', JSON.stringify(res.data))
    //             })
    //     } else if (selectedIndex == 2) {
    //         // AsyncStorage.getItem('1list').then(
    //         //     data => {
    //         //         if (data) {
    //         //             console.log(data);
    //         //             setItemList(JSON.parse(data))
    //         //         }
    //         //     }
    //         // )
    //         //获取待收货订单
    //         axios.post('/order/single',{ state: 1, userid: userid })
    //             .then(res => {
    //                 setItemList(res.data);
    //                 // AsyncStorage.setItem('1list', JSON.stringify(res.data))
    //             })

    //     } else if (selectedIndex == 3) {
    //         // AsyncStorage.getItem('2list').then(
    //         //     data => {
    //         //         if (data) {
    //         //             console.log(data);
    //         //             setItemList(JSON.parse(data))
    //         //         }
    //         //     }
    //         // )
    //         //获取待评价订单
    //         axios.post('/order/single',{ state: 2, userid: userid })
    //             .then(res => {
    //                 setItemList(res.data);
    //                 // AsyncStorage.setItem('2list', JSON.stringify(res.data))
    //             })
    //     }
    // }, [selectedIndex]);
    return <ScrollView style={styles.con}>
        <View style={{width: '100%'}}>
            <View>
                <View style={{ width: '100%' }}>
                    <ButtonGroup
                        buttons={['全部', '待发货', '待收货', '待评价']}
                        selectedIndex={selectedIndex}
                        onPress={(value) => {
                            setSelectedIndex(value);
                        }}
                        containerStyle={{ marginBottom: 20 }}
                    />
                </View>
            </View>
            <View style={{ width: '100%', height: '80%' }}>
                {
                    itemList.map(item => {
                        return <TouchableOpacity key={item.orderid} style={styles.container}  onPress={() => navigation.navigate('billinfo', { orderid: item.orderid, state: item.state, img: item.first_img })}>
                            <Card style={{ width: '100%' }} >
                                <View style={{flexDirection: 'row',alignItems: 'center'}}>
                                    <AntDesign name="gift" size={24} color="black" style={{alignItems: 'center'}} />
                                    <Text style={{ fontSize: 18, position: 'relative', left: 15}}>订单号:{item.ordernum}</Text>
                                    <AntDesign name="caretright" size={20} color="black" style={{position: 'relative', left: 110}}  onPress={() => navigation.navigate('billinfo', { orderid: item.orderid, state: item.first_img })} />
                                </View>
                                <Text style={{ color: '#BBBBBB', fontSize: 12, position: 'relative', left: 0}}>{fortime(item.start_date)}</Text>
                                <View style={{ width: '100%', flexDirection: 'row', marginTop: 10 }}>
                                    <Image source={{uri: baseURL+item.first_img}} style={{width: 60, height: 60, resizeMode: 'cover'}}></Image>
                                    <View style={{width: '80%', left: 10}}>
                                        <Text numberOfLines={2}>{item.com_name}</Text>
                                        <Text numberOfLines={2}>￥{item.sumprice}</Text>
                                    </View>
                                </View>
                            </Card>
                        </TouchableOpacity>
                    })
                }
            </View>
        </View>
        <View style={{height: 50}}></View>
        
    </ScrollView>
}
const styles = StyleSheet.create({
    con: {
        padding: '4%',
        backgroundColor: '#fff',
        height: '100%'
    },
    minicon: {
        borderBottomWidth: 1,
        borderBottomColor: '#BBBBBB',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    leftcon: {
        alignItems: 'center'
    },
    container: {
        // flex: 1,
        width: '100%'
    },
    fonts: {
        marginBottom: 8,
    },
    user: {
        flexDirection: 'row',
        marginBottom: 6,
    },
    image: {
        width: 30,
        height: 30,
        marginRight: 10,
    },
    name: {
        fontSize: 16,
        marginTop: 5,
    },
    subHeader: {
        backgroundColor: "#2089dc",
        color: "white",
        textAlign: "center",
        paddingVertical: 5,
        marginBottom: 10
    }
})
export default PayList